Trening Shiny App repopsi

Cilj treninga

• Da se upoznamo sa osnovama Shiny aplikacije

• Da rekreiramo web aplikaciju repopsi

• Da publikujemo aplikaciju koristeći Shinyapps.io

Šta je Shiny web aplikacija?

Shiny je paket RStudio-a koji se koristi za pravljenje interaktivnih web aplikacija uz pomoć R programskog jezika.

Možete da napravite aplikaciju na posebnoj web stranici kao što je slučaj sa repopsi ili da vam bude deo R Markdown dokumenta ili da pravite takozvane Shiny dashboards. Možete takođe da unapredite Shiny aplikaciju uz pomoć CSS tema, htmlwidgets-a, ili JavaScript-a.

Shiny aplikacije se lako kreiraju. Nisu neophodne veštine za izradu web stranica. Ali ukoliko ih imate još bolje.

Napravićemo novi projekat

Napravićemo novi projekat

Napravićemo novi projekat

Otvorićemo Shiny aplikaciju

Izgled Shiny aplikacije

app.R

Kod za Shiny aplikaciju ima tri dela:

1. global kod

• Gde se importuju biblioteke, pristupa izvoru podataka i gde se podaci sredjuju

2. UI kod

• UI (User interface) gde se prilagodjava izgled aplikacije

3. Server kod

• Kod koji pokreće aplikaciju, gde se prava magija dešava

Da vidimo kako izgleda pravljenje shiny aplikacije

Shiny paket i drugi paketi koji su potrebni za izradu aplikacije

Prvo ćemo instalirati shiny paket i ostale pakete koji su neophodni za aplikaciju.

install.packages("shiny") #za shiny aplikaciju

install.packages("shinythemes") # teme koje ulepšavaju izgled aplikacije

install.packages("shinyWidgets") # uredjivanje dugmića ili nekih drugih delova aplikacije

install.packages("tidyverse") # za obradu i pripremanje podataka za vizuelni prikaz

install.packages("DT") # odličan paket za pravljenje tabela

install.packages("gsheet") # koristi se za uvoz google sheets

install.packages("writexl") # koristi se u delu za skidanje podataka u excel formatu

install.packages("httr") # služi za preuzimanje i skidanje podataka u csv-u sa linka 

Shiny paket i drugi paketi koji su potrebni za izradu aplikacije

Potom ćemo uvesti biblioteke koje su nam potrebne

library (shiny)

library (shinythemes)

library (shinyWidgets)

library (tidyverse)

library (gsheet)

library (writexl)

library (httr)

Skinućemo kod originalne aplikacije

Idite na sledeći link.

Global kod

Global deo preuzimanje podataka

Za ovo koristimo gsheet biblioteku

repopsi <- gsheet2tbl("https://docs.google.com/spreadsheets/d/1A6O1d0S7iBYsKVbdBP9AWdYXMWvrN_lCh_oMldCmNsA/edit#gid=0")

Global deo prikaz podataka

Uredjivanje kolona

repopsi <- repopsi[-c(1:8),]

my.names <- repopsi[1,]

colnames(repopsi) <- my.names

repopsi <- repopsi[-1,]

repopsi <- repopsi[,-1]

colnames(repopsi)<-gsub(".$","",colnames(repopsi))

Tabela posle uredjivanja kolona

Važna napomena

• Da bi gsheet2tbl funkcionisao, neophodno je da je “Share by link” uključen.
• Ukoliko promenite google sheet morate da sredite kolone u skladu sa tim.
• Ukoliko želite da koristite excel potreban vam je drugi paket za uvoz tih podataka, a to je readxl::read_xlsx().
• Ako je novi excel fajl, treba proveriti da li treba sredjivati podatke ili ne.

Dodavanje linkova

repopsi1 <-repopsi
# Koristi se za dodavanje linkova na več postojeće informacije u koloni (to je važno za funkciju datatable)

repopsi1$`Source of the original instrument` <- ifelse(is.na(repopsi1$`Source of the original instrument`), 
                                                       
NA, paste0("<a href='", repopsi1$`Source of the original instrument`, "' target='_blank'>",
                           
repopsi1$`Source of the original instrument`, " </a>"))

# Koristi se za pretvaranje u aktivni link za slanje na email adresu u koloni
repopsi1$`Contact email address` <- ifelse(is.na(repopsi1$`Contact email address`  ),
                                                                 
NA, paste0("<a href='mailto:",repopsi1$`Contact email address`  , "' target='_blank'>",
                                                                            
repopsi1$`Contact email address`  ,"</a>"))

Spajanje kolona i uklanjanje nepotrebnih

repopsi1<- repopsi1%>%
  
  unite(`Instrument name and version`, `Title in English`, Abbreviation, Version, sep = " | ",remove = FALSE, na.rm = TRUE)%>%
  
  select(-c(`Title in English`,Abbreviation,Version))%>%
  
  unite(`Contact person`, `Contact person`, `Contact email address`, sep = " | ",remove = FALSE, na.rm = TRUE) %>%
  
  select(-`Contact email address`) %>%
  
  unite(`Where to find the instrument?`, `Instrument availability`, `Link to instrument in the Repository`, `Link to instrument outside of the Repository`, sep = " | ",remove = FALSE,na.rm = TRUE)%>%
  
  select(-c(`Instrument availability`, `Link to instrument in the Repository`, `Link to instrument outside of the Repository`))

Menjanje redosleda kolona

repopsi1<- repopsi1%>%
  
  relocate(`Where to find the instrument?`, .after = `Instrument name and version`) %>%
  
  relocate(`Citation of the original instrument`, .after = `Where to find the instrument?`) %>%
  
  relocate(`Citation of the translation/adaptation`, .after = `Citation of the original instrument`) %>%
  
  relocate(Keywords, .after = `Citation of the translation/adaptation`) %>%
  
  relocate(`Contact person`, .after = Keywords)

Originalna tabela i url za skidanje CSV podataka sa drugog sajta

  #repopsi duplicate for download 

repopsi2 <-repopsi

repopsi2$ID  <-seq.int(nrow(repopsi2))

#URL for CSV download of all data

URL <- "https://osf.io/download/mxrc2/"

UI kod

UI kod

UI se, u slučaju repopsi aplikacije, sastoji od navbarPage koja ima sidebarPanel sa leve i mainPanel sa desne strane. Na ovaj način se uredjuje raspored elemenata aplikacije.

Pre samog sadržaja ovih panela postoji deo koji definiše temu, javaskript koji je važan za global pretragu tabele, css koji uredjuje boje i naslova same aplikacije.

Tema i javaskript

Sadržaj myscript.js

www folder

U ovom trenutku bismo pomenuli da www folder postoji da bi se u njega ubacile slike (logoi i slično), ako je kompleksniji css fajl ili javaskript.

Uredjivanje estetike aplikacije

Neke od funkcija HTML5

• strong() boldovan tekst

• a(“tekst”/slika, href=“link”) linkovan tekst

• h2(),h3(),h4(),h5(), h6() tekst različitog nivoa

• br() razmak izmedju teksta

• img() slika

• HTML() direktno povlači string karaktera kao HTML kod

UI widget-i i reaktivni output-i

Najvažniji deo ui predstavljaju razni widget-i ili reaktivni output-i. To su dakle različite vrste opcija gde se ili unose odredjene komande, podaci, ili gde će se pojaviti odredjeni grafikon/tabela a zatim se na server strani od tih unosa u realnom vremenu prikazuju tabele, grafikoni, skidaju podaci i slično u vidu output-a. Na ovaj način se obezbedjuje interaktivnost.

Svaki widget ili reaktivni output ima svoj id koji mu vi dodeljujete i jako je važno da zapamtite kako ste ga nazvali.

U sporednom panelu ove aplikacije ima 4 widget-a (unos teksta za filtriranje i tri dugmeta za skidanje podataka) a u glavnom panelu jedan reaktivni output (tabela).

UI widget-i i reaktivni output

sidebarPanel

• tags$input sa id global_filter
• downloadBttn sa id downloadfilterxlsx
• downloadBttn sa id downloadalldatacsv
• downloadBttn sa id downloadalldataxlsx

mainPanel

• dataTableOutput sa id tablerepopsi

Server kod

Aktiviranje tabele

Aktiviranje skidanja filtriranih podataka

Aktiviranje skidanja svih podataka csv

Aktiviranje skidanja svih podataka excel

Objavljivanje aplikacije na Shinyapps

Korisni linkovi i kontakt

• Shiny tutorijal
• Galerija Shiny aplikacija
• R-ladies Belgrade meetup stranica
• Kontakt Duško Medić i Tijana Blagojev

Hvala mnogo na pažnji!